<!doctype html>
<html>
<head>
<script src="js/jquery.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*服务态度、服务质量*/
.evaluate{ height:72px; background-color:#fff; position:relative; margin-top:14px; padding-left:4%; padding-top:8px; box-sizing:border-box}
.evaluate p{ line-height:27px; color:#65646b; font-size:14px; float:left}
/*文字评价*/
.say_more{ height:160px; position:relative; margin-top:14px; background-color:#fff;}
textarea{ height:160px; width:92%; margin-left:4%; line-height:22px; color:#191919;}
/*评价成功*/
.success{ margin-top:46px;}
.success h1{ text-align:center; font-size:16px; line-height:28px; color:#191919;}
.success h2{ text-align:center; font-size:12px; line-height:27px; color:#65646b;}
/*分享框*/
.black{ z-index:3}
.share_box{ width:100%; height:126px; background-color:#fff; position:fixed; left:0; bottom:-140px; z-index:4}
.share_title{ position:relative; height:41px; line-height:41px; color:#65646b; text-align:center; font-size:14px;}
.share_title img{ width:9px; height:9px; position:absolute; left:4%; top:14px;}
.share,.share1{ width:50%; float:left}
.share img,.share1 img{margin-top:15px; width:33px; height:auto}
.share img{float:right; margin-right:22%;} 
.share1 img{float:left; margin-left:22%;}
.share p,.share1 p{ position:relative; bottom:0; font-size:12px; color:#65646b; line-height:36px;}
.share p{ clear:right; text-align:right; right:22%; margin-right:-5px;}
.share1 p{ clear:left; text-align:left; left:22%; margin-left:-2px;}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">评价
	<div class="header_left" onclick="window.history.go(-1)"><img src="images/return.png"></div>
</div>
<!--阿姨信息-->
<div class="waiter_box">
	<div class="border_top"></div>
	<div class="waiter_img"><img src=""></div>
    <div class="waiter">
    	<h1>阿姨</h1>
        <h2>服务评价：
        	<div class="star_box" style=" position:absolute; top:0; right:-85px; margin-top:0">
                <img src="images/star.png">
                <img src="images/star.png">
                <img src="images/star.png">
                <img src="images/star.png">
                <img src="images/star_gray.png">
            </div>
        </h2>
        <p>接单数：30单</p>
    </div>
    <p class="waiter_id">工号：370601001</p> 
    <div class="border_bottom"></div>
</div>
<!--服务态度、服务质量-->
<div class="evaluate">
	<div class="border_top"></div>
	<p>服务态度：</p>
    <div class="star_box" id="oimg">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
    </div>
    <p style="clear:left">服务质量：</p>
    <div class="star_box" id="cimg">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
        <img src="images/star_gray.png">
    </div>
    <div class="border_bottom"></div>
</div>
<!--文字评价-->
<div class="say_more">
	<div class="border_top"></div>
	<textarea placeholder="还想说点什么（文字输入限制1-225个字符）" maxlength=225></textarea>
    <div class="border_bottom"></div>
</div>
<!--提交-->
<div class="confirm_box">
	<div class="confirm">提交</div>
</div>
<!--评价成功-->
<div class="success">
    <h1>评价成功！</h1>
    <h2>感谢您使用本次服务</h2>
</div>
<!--评价成功，弹出分享框-->
<div class="black"></div>
<div class="share_box">
	<div class="share_title">分享给好友
    	<img src="images/close_share.png" class="close_share">
        <div class="border_bottom"></div>
    </div>
    <div class="share">
    	<img src="images/weixin3.png">
        <p>微信好友</p>
    </div>
    <div class="share1">
    	<img src="images/friend.png">
        <p style="text-align:left;">朋友圈</p>
    </div>
</div>
<script>
//五星评价:服务态度
var oimg=document.getElementById("oimg");
    $("#oimg img").click(function(){//图片点击时改变图片路径
		$("#oimg img").attr('src', 'images/star.png');
		$(this).nextAll().attr('src', 'images/star_gray.png');	
	})
//五星评价:服务质量
var cimg=document.getElementById("cimg");
    $("#cimg img").click(function(){
		
		$("#cimg img").attr('src', 'images/star.png');
		$(this).nextAll().attr('src', 'images/star_gray.png');	
	})	
	
//点击提交，显示评价成功
$(".success").hide();
$(".confirm").click(
	function(){
		$(".success").show();
		$(".confirm_box").remove();
		setTimeout(function(){
			$(".black").show();
			$(".share_box").show();
			$(".share_box").animate({bottom:'0'},200);
			},300)	  
		}
	
)
//点击提交，显示评价成功:弹出分享
$(".black").hide();
$(".share_box").hide();
$(".close_share").click(function(){
	$(".black").hide();
    $(".share_box").hide();
	})
</script>
</body>
</html>

